<template>
  <div class="home-index-module-c-compontent">
    <div class="top-title">库存统计</div>
    <div class="module-c-contianer">
      <div class="pie-chart-block" ref="chart"></div>
      <div class="info-block">
        <div class="num-item-row">
          <div class="label">总库位：</div>
          <div class="num">{{chartData.total}}</div>
        </div>
        <div class="num-item-row" v-for="(item,index) in chartData.list" :key="'num-item-'+index">
          <div class="label">{{item.text}}：</div>
          <div class="num">{{item.num}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { GetPalceNumbers} from '@/api/modular/system/homeManage'
export default {
  name:'homeIndexModuleCCompontent',
  data(){
    return {
      $dom:null,
      chart:null,
      defaultOption:{
        tooltip: {
        	trigger: 'item',
        	formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
        	show: false
        },
        title:{
        	text:"80.02%",
        	left:"center",
        	top:"45%",
        	textStyle:{
        		color:"#000",
        		fontSize:30,
        		align:"center"
        	}
        },
        graphic:{
        	type:"text",
        	left:"center",
        	top:"38%",
        	style:{
        		text:"存货占比",
        		textAlign:"center",
        		fill:"#929292",
        		fontSize:18
        	}
        },
        series: [
        	{
        		name: '库存占比',
        		type: 'pie',
        		radius: ['60px', '80px'],
        		avoidLabelOverlap: false,
        		itemStyle: {
        			borderRadius: 4,
        			borderColor: '#fff',
        			borderWidth: 2
        		},
        		label:{
        			formatter: '{fc|{b}}\n{hr|}\n{fc|{d}%} ',
        			rich: {
        				fc: {
        					color: '#333',
        					fontSize:12,
        					lineHeight:16,
        					align: 'center'
        				},
        				hr: {
        					borderColor: '#666',
        					width: '100%',
        					borderWidth: 1,
        					height: 0
        				}
        			}
        		},
        		labelLine:{
        			length:10,
        			length2:5
        		},
        		data: []
        	}
        ]
      },
      chartData:{
        total:0,
        list:[],
        totalRate:'1%'
      }
    }
  },
  methods:{
    init(){
      this.getData((f)=>{
      	if (f) {
      		this.createChart();
      		this.drawChart();
      	}
      })	
    },
    getData(callback){
      GetPalceNumbers().then((d)=>{
        let _arr = [], _obj={};
        _obj = {text:'空库位',num:(d.data.emptyNum||0),color:['#5988e5','#36cfdc']}
        _arr.push(_obj)
        _obj = {text:'有货库位',num:(d.data.cunhuoNum||0),color:['#f9cf21','#f84302']}
        _arr.push(_obj)
        _obj = {text:'空托库位',num:(d.data.emptyContainerNum||0),color:['#66b53d','#d4f9a6']}
        _arr.push(_obj)
        this.chartData.list = _arr;
        let _total = 0;
        this.chartData.list.forEach((item)=>{
          _total = _total + item.num
        })
         this.chartData.total = _total
        let _hasNum = d.data.cunhuoNum||0
        this.chartData.totalRate = _total?(Number(((_hasNum/_total)*100).toFixed(2)) + '%'):'0%';
        callback && callback(true)
      }).catch(()=>{
        callback && callback(false)
      })
    },
    drawChart(){
      let arr = [];
      this.chartData.list.forEach((item)=>{
      	arr.push({
          value:item.num,
          name:item.text,
          itemStyle:{
            normal:{
              color:new echarts.graphic.LinearGradient(1, 0, 0, 0,[{offset:0,color:item.color[0]},{offset:1,color:item.color[1]}])
            }
          }
        })
      })
      let opt = {...this.defaultOption}
      opt.series[0].data = arr;
      opt.title.text = this.chartData.totalRate;
      this.chart.setOption(opt)
    },
    createChart(){
      if (!this.$dom) {
      	this.$dom = this.$refs.chart;
      	this.chart = echarts.init(this.$dom)
      }
    },
    destoryChart(){
      try{
      	this.chart.dispose();
      	this.$dom.innerHTML = '';
      	this.$dom = null;
      }catch(e){
      	//TODO handle the exception
      }
    }
  },
  mounted(){
    this.init()
  },
  beforeDestroy(){
    this.destoryChart()
  }
}
</script>

<style lang="less" scoped>
.home-index-module-c-compontent{
  background-color: #F0F8FF;
  border-radius: 10px;
  height:100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .top-title{
    flex-shrink: 0;
    background-color: #fff;
    padding:8px 16px;
    font-size: 18px;
  }
  .module-c-contianer{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    .pie-chart-block{
      height:240px;
      flex-shrink: 0;
    }
    .info-block{
      flex-grow: 1;
      overflow: auto;
      .num-item-row{
        display: flex;
        font-size: 28px;
        padding:4px 16px;
        .label{
          width:200px;
          flex-shrink: 0;
          color:#999;
          white-space:nowrap;
          overflow: hidden;
        }
        .num{
          flex-grow:1;
          text-align: right;
          color:#333;
          white-space:nowrap;
          overflow: hidden;
        }
      }
    }
  }
  
}
</style>